/* eslint-disable no-undef */
<template>
  <basic-dialog :visible="show"
                title="工单详情"
                isShowClose
                isFullScreen
                :min-width="'760px'"
                :titleTips="`[${form.id ? form.id : '--'}]`"
                :isShowInnerLoading = 'isShowInnerLoading'
                @close="$emit('close')"
  >
    <q-tabs
      v-model="tab"
      narrow-indicator
      inline-label
      dense
      align="left"
      indicator-color="primary"
      active-color="primary"
      style="padding: 0 15px"
    >
      <q-tab @click="clickBasicInfo" name="basicInfo" label="基本信息" />
      <q-tab @click="clickprocessInfo" name="processInfo" label="工艺信息" />
      <q-tab @click="clickprocessingProgramList" name="processingProgramList" label="加工程序列表" />
      <q-tab @click="clickPlanDescription" name="planDescription" label="计划描述" />
    </q-tabs>

    <q-separator />

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="basicInfo" style="padding: 20px 0">
        <q-form class="dialog-content" greedy>
          <div class="row" style="padding: 0 10px">
            <div class="col-4 text-ellipsis">
              工单状态：
              <span style="display: inline-block">
                <div class="status" :style="{backgroundColor: judgeStatus(form.orderStatus, 'color', form.isSuspend)}" />
                <span>{{ judgeStatus(form.orderStatus, 'name', form.isSuspend) }}</span>
              </span>
            </div>
            <div class="col-4 text-ellipsis">
              产品：{{ form.materialName ? form.materialName : '--' }}({{ form.materialNumber ? form.materialNumber : '--' }})
              <q-tooltip>{{ form.materialName ? form.materialName : '--' }}({{ form.materialNumber ? form.materialNumber : '--' }})</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              派工数量：{{ form.jobCount || 0 }}
            </div>
            <div class="col-4 text-ellipsis">
              派工日期：{{ form.createTime | toTime }}
            </div>
            <div class="col-4 text-ellipsis">
              订单编号：{{ form.orderNumber ? form.orderNumber : '--' }}
              <q-tooltip>{{ form.orderNumber ? form.orderNumber : '--' }}</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              完工数量：{{ form.finishedCount || 0 }}
            </div>
            <div class="col-4 text-ellipsis">
              派单人员：{{ form.creator ? form.creator : '--' }}
              <q-tooltip>{{ form.creator ? form.creator : '--' }}</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              批次编号：{{ form.orderBatch ? form.orderBatch : '--'  }}
              <q-tooltip>{{  form.orderBatch ? form.orderBatch : '--'  }}</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              不良数量：<span v-if="form.rejectionCount === 0">0</span>
              <a style="text-decoration: underline" class="primary cursor-pointer" @click="openBadDetails" v-else>{{ form.rejectionCount }}</a>
            </div>
            <div class="col-4 text-ellipsis">
              加工工序：{{ form.processSort && form.processName ? `${form.processSort}-${form.processName}` : '--' }}
              <q-tooltip>{{ form.processSort && form.processName ? `${form.processSort}-${form.processName}` : '--' }}</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              优先级别：<span :style="{ color: judgePriorityColor(form.priority) }">{{ judgePriorityName(form.priority) }}</span>
            </div>
            <div class="col-4 text-ellipsis">
              让步数量：<span v-if="form.concessionCount === 0">0</span>
              <a style="text-decoration: underline" class="primary cursor-pointer" @click="openConcession" v-else>{{ form.concessionCount }}</a>
            </div>
            <div class="col-4 text-ellipsis">
              加工设备：{{ form.deviceName ? `${form.deviceName}(${form.deviceNumber})` : '--' }}
              <q-tooltip>{{ form.deviceName ? `${form.deviceName}(${form.deviceNumber})` : '--' }}</q-tooltip>
            </div>
            <div class="col-4 text-ellipsis">
              计划开工：{{  form.startTime ? form.startTime : '--' }}
            </div>
            <div class="col-4 text-ellipsis">
              实际开工：{{ form.actualStartTime ? form.actualStartTime : '--' }}
            </div>
            <div class="col-4 text-ellipsis">
              报工明细：<a style="text-decoration: underline" class="primary cursor-pointer" @click="openCompleteDetails" v-if="form.finishedCount > 0">查看</a>
              <span v-else>—</span>
            </div>
            <div class="col-4 text-ellipsis">
              计划完工：{{  form.endTime ? form.endTime : '--' }}
            </div>
            <div class="col-4 text-ellipsis">
              实际完工：{{ form.actualEndTime ? form.actualEndTime : '未完工' }}
            </div>
          </div>
          <div class="flex padding-r-20 padding-l-20">
            <div>备注：</div>
            <div>{{form.comments || '--'}}</div>
          </div>
        </q-form>
        <div style="padding: 0 20px; margin-top: 0">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white font-14 text-weight-bold">{{ '处理进程 ' }}</div>
          </q-card-section>
          <q-table
            :data="tableData" :columns="columns"
            row-key="name" class="myTable scroll my-sticky-virt scroll-table inherit"
            style="margin: 0; max-height: 250px"
            :pagination="pagination" hide-bottom
            no-data-label="暂无数据">
            <template v-slot:body-cell-id="props">
              <q-td class="operations" style="width: 200px">
                {{ tableData.indexOf(props.row) + 1 }}
              </q-td>
            </template>
          </q-table>
        </div>
      </q-tab-panel>

      <q-tab-panel style="padding: 20px 0" name="processInfo">
        <div class="row" style="padding: 0 10px">
          <div class="col-3 text-ellipsis">
            工序名称：{{ rowInfo.processName ? `${rowInfo.processName}` : '--' }}
            <q-tooltip>{{ rowInfo.processName ? `${rowInfo.processName}` : '--' }}</q-tooltip>
          </div>
          <div class="col-3 text-ellipsis">
            设备类型：{{ processInfo.deviceType || '--'}}
            <q-tooltip>{{ processInfo.deviceType || '--'}}</q-tooltip>
          </div>
          <div class="col-4 text-ellipsis">
            理论工序节拍：{{ rowInfo.cycleTime ? getDuration(rowInfo.cycleTime) : '--' }}
            <q-tooltip>{{ rowInfo.cycleTime ? getDuration(rowInfo.cycleTime) : '--' }}</q-tooltip>
          </div>
          <div class="col-2 text-ellipsis">
            质检工序：{{ rowInfo.doQcInspection ? '是' : '否'}}
          </div>
        </div>
        <div style="padding: 0 20px; margin-top: 10px">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white">{{ '工艺内容' }}</div>
          </q-card-section>
          <q-input disable outlined v-model="processInfo.comments" type="textarea" class="textarea-box" autogrow maxlength="200"/>
        </div>
        <div style="padding: 0 20px; margin-top: 20px">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white">{{ '工艺文件' }}</div>
          </q-card-section>
          <q-card-section style="padding: 0;">
            <div>
              <q-scroll-area class="box-content bg-white bordered" :thumb-style="thumbStyle" style="height: 300px;border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;padding: 10px 10px; border: 1px solid #d3d3d3">
                <div class="sudoku_row"  >
                  <div class="sudoku_item " v-for="(processFile,index) in processFileList" :key="index">
                    <div @click="showFile(judgeFileExtension(processFile.name).type, processFile)" v-ripple class="file_item relative-position">
                      <div style="display: flex">
                        <i class="iconfont" :class="[judgeFileExtension(processFile.name).icon]" :style="{color: judgeFileExtension(processFile.name).color}"/>
                        <span class="text-ellipsis" style="width: 100px; display: inline-block;line-height: 26px;margin-left: 3px">
                          {{ processFile.name }}
                          <q-tooltip anchor="bottom middle" self="center middle">{{ processFile.name }}</q-tooltip>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </q-scroll-area>
            </div>
          </q-card-section>
        </div>
      </q-tab-panel>

      <q-tab-panel style="padding: 20px" name="processingProgramList">
        <q-table
          :data="tableDataProgramList" :columns="columnsProgramList"
          row-key="name" class="myTable scroll inherit"
          style="margin: 0; max-height: 400px"
          :pagination.sync="paginationProgramList" :hide-bottom="!!tableDataProgramList.length">
          <template v-slot:body-cell-createTime="props">
            <q-td>
              {{ props.row.createTime | toTime }}
            </q-td>
          </template>
          <template v-slot:body-cell-id="props">
            <q-td class="operations" style="width: 200px">
              {{ tableDataProgramList.indexOf(props.row) + 1 }}
            </q-td>
          </template>
        </q-table>
      </q-tab-panel>

      <q-tab-panel name="planDescription">
        <div>
          <div v-html="comment"></div>
        </div>
      </q-tab-panel>
    </q-tab-panels>
<!--        </q-card-section>-->
        <!-- tab内容End -->
    <!--报工明细-->

    <basic-dialog :visible="completeDetails.show"
                  title="报工明细"
                  isShowClose
                  :min-width="'760px'"
                  :isShowInnerLoading = 'isShowInnerLoading'
                  @close="completeDetails.show = false"
    >
      <q-table
        :data="tableDataCheckinLog" :columns="columnsCheckinLog"
        row-key="name" class="myTable scroll inherit"
        style="max-height: 260px; margin: 20px"
        :pagination.sync="paginationCheckinLog" :hide-bottom="tableDataCheckinLog.length !== 0">
        <template v-slot:no-data>
          <div class="full-width row flex-center font-size-14" style="color: #999">
            暂无数据
          </div>
        </template>
        <template v-slot:body-cell-id="props">
          <q-td class="id">
            {{ props.row.id }}
          </q-td>
        </template>
        <template v-slot:body-cell-creator="props">
          <q-td class="creator">
            {{ props.row.creator ? props.row.creator : '—' }}
          </q-td>
        </template>
        <template v-slot:body-cell-shiftName="props">
          <q-td class="shiftName">
            {{ props.row.shiftName ? props.row.shiftName : '—' }}
          </q-td>
        </template>
        <template v-slot:body-cell-operator="props">
          <q-td class="operator">
            {{ props.row.operator ? props.row.operator : '—' }}
          </q-td>
        </template>
        <template v-slot:body-cell-time="props">
          <q-td class="time">
            {{ props.row.time ? props.row.time : '—' }}
          </q-td>
        </template>
        <template v-slot:body-cell-checkinCount="props">
          <q-td class="checkinCount">
            {{ props.row.checkinCount ? props.row.checkinCount : '—' }}
          </q-td>
        </template>
        <template v-slot:body-cell-isAutomatic="props">
          <q-td class="isAutomatic">
            {{ props.row.isAutomatic ? '数据采集' : '手动录入' }}
          </q-td>
        </template>
        <template v-slot:body-cell-remark="props">
          <q-td>
            {{ props.row.remark ? props.row.remark : '—' }}
          </q-td>
        </template>
      </q-table>
    </basic-dialog>

    <!--不良明细-->
    <basic-dialog :visible="badDetails.show"
                  title="不良明细"
                  isShowClose
                  :min-width="'760px'"
                  :isShowInnerLoading = 'isShowInnerLoading'
                  @close="badDetails.show = false"
    >
      <q-table
        :data="tableDataBadDetails" :columns="columnsBadDetails"
        row-key="name" class="myTable scroll inherit"
        style="margin: 0; max-height: 280px"
        :pagination.sync="paginationBadDetails" :hide-bottom="tableDataBadDetails.length !== 0">
        <template v-slot:no-data>
          <div class="full-width row flex-center font-size-14" style="color: #999">
            暂无数据
          </div>
        </template>
      </q-table>
    </basic-dialog>

    <!--让步明细-->

    <basic-dialog :visible="concession.show"
                  title="让步明细"
                  isShowClose
                  :min-width="'760px'"
                  :isShowInnerLoading = 'isShowInnerLoading'
                  @close="concession.show = false"
    >
      <q-table
        :data="tableDataConcession" :columns="columnsConcession"
        row-key="name" class="myTable scroll inherit"
        style="margin: 0; max-height: 280px"
        :pagination.sync="paginationConcession" :hide-bottom="tableDataConcession.length !== 0">
        <template v-slot:no-data>
          <div class="full-width row flex-center font-size-14" style="color: #999">
            暂无数据
          </div>
        </template>
      </q-table>
    </basic-dialog>
    <!--查看pdf-->
    <look-pdf ref="showPdf"/>

    <!--查看图片-->
    <look-img ref="showImg"/>
<!--      </q-card>-->
  </basic-dialog>
<!--    </q-dialog>-->

<!--  </div>-->
</template>

<script>
import {
  getCheckinLogs,
  orderQualityLogs,
  orderLogs,
  processList,
  // processInfo,
  processFileList,
  getWorkshopPlanning, getWorkingSteps
} from 'src/boot/job/process-order'
import lookImg from 'src/components/look-img'
import lookPdf from 'src/components/look-pdf'
import moment from 'moment'
export default {
  name: 'work-order-details',
  components: {
    lookImg,
    lookPdf
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      isShowInnerLoading: false,
      processFileList: [],
      curSelect: null,
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      processInfo: {
        comments: ''
      }, // 工艺信息
      tab: 'basicInfo',
      form: {},
      statusOptions: [],
      // 报工明细对话框f
      completeDetails: {
        show: false
      },
      // 不良明细对话框
      badDetails: {
        show: false
      },
      // 让步明细对话框
      concession: {
        show: false
      },

      // 处理进程表格源数据
      tableData: [],
      // 处理进程表格列
      columns: [
        { name: 'id', label: '操作记录编号', align: 'left', field: 'id' },
        { name: 'workOrderId', label: '工单编号', align: 'left', field: 'workOrderId' },
        { name: 'operator', label: '操作员', align: 'left', field: 'operator' },
        { name: 'time', label: '操作时间', align: 'left', field: 'time' },
        { name: 'operation', label: '操作类型', align: 'left', field: 'operation' }
      ],
      // 处理进程分页器
      pagination: {
        rowsPerPage: 0
      },

      // 报工明细数据源
      tableDataCheckinLog: [],
      // 报工明细表格数据列
      columnsCheckinLog: [
        { name: 'id', label: '编号', align: 'left', field: 'id' },
        { name: 'creator', label: '报工人', align: 'left', field: 'creator' },
        { name: 'shiftName', label: '班制', align: 'left', field: 'shiftName' },
        { name: 'operator', label: '操作员', align: 'left', field: 'operator' },
        { name: 'time', label: '报工时间', align: 'left', field: 'time' },
        { name: 'checkinCount', label: '报工数量', align: 'left', field: 'checkinCount' },
        { name: 'isAutomatic', label: '报工类型', align: 'left', field: 'isAutomatic' },
        { name: 'remark', label: '备注', align: 'left', field: 'remark' }
      ],
      // 报工明细表格分页器
      paginationCheckinLog: {
        rowsPerPage: 0
      },

      // 不良明细数据源
      tableDataBadDetails: [],
      // 不良明细表格数据列
      columnsBadDetails: [
        { name: 'id', label: '编号', align: 'left', field: 'id' },
        { name: 'gidName', label: '不良原因类型', align: 'left', field: 'gidName' },
        { name: 'causeName', label: '不良原因', align: 'left', field: 'causeName' },
        { name: 'shiftsName', label: '班制', align: 'left', field: 'shiftsName' },
        { name: 'count', label: '不良数量', align: 'left', field: 'count' },
        { name: 'name', label: '录入人', align: 'left', field: 'name' },
        { name: 'createTime', label: '录入时间', align: 'left', field: 'createTime' }
      ],
      // 不良明细表格分页器
      paginationBadDetails: {
        rowsPerPage: 0
      },

      // 让步明细数据源
      tableDataConcession: [],
      // 让步明细表格数据列
      columnsConcession: [
        { name: 'id', label: '编号', align: 'left', field: 'id' },
        { name: 'causeName', label: '让步原因', align: 'left', field: 'causeName' },
        { name: 'shiftsName', label: '班制', align: 'left', field: 'shiftsName' },
        { name: 'count', label: '让步数量', align: 'left', field: 'count' },
        { name: 'name', label: '录入人', align: 'left', field: 'name' },
        { name: 'createTime', label: '录入时间', align: 'left', field: 'createTime' }
      ],
      // 让步明细表格分页器
      paginationConcession: {
        rowsPerPage: 0
      },

      // 加工程序列表数据源
      tableDataProgramList: [],
      // 让步明细表格数据列
      columnsProgramList: [
        { name: 'id', label: '序号', align: 'left', field: 'id' },
        { name: 'name', label: '加工程序', align: 'left', field: 'name' },
        { name: 'comments', label: '备注', align: 'left', field: 'comments' },
        { name: 'createTime', label: '创建时间', align: 'left', field: 'createTime' }
      ],
      // 让步明细表格分页器
      paginationProgramList: {
        rowsPerPage: 0
      },
      rowInfo: {},
      comment: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 预览文件
    showFile (type, item) {
      if (type === 'pdf') {
        this.$refs.showPdf.showDialog(item.url)
      } else {
        this.$refs.showImg.showDialog(item.url)
      }
    },

    // 点击基本信息
    clickBasicInfo () {
      this.getOrderLogs()
    },

    // 点击工艺信息
    clickprocessInfo () {
      if (this.form.processInfoId) {
        this.getProcessInfo()
        this.getProcessFileList()
      } else {
        this.processFileList = []
        this.processInfo = {
          comments: ''
        }
      }
    },

    // 点击加工程序列表
    clickprocessingProgramList () {
      if (this.form.processInfoId) {
        this.getProcessList()
      } else {
        this.tableDataProgramList = []
      }
    },
    // 点击计划描述
    clickPlanDescription () {
      getWorkshopPlanning(this.form.workshopPlanningId).then(res => {
        const comments = res.data.comments
        if (comments) {
          let result = ''
          const commentList = comments.split('\n')
          commentList.forEach(item => {
            result += `<div style="word-break: break-all">${item}</div>`
          })
          this.comment = result
        } else {
          this.comment = `<div>--</div>`
        }
      })
    },

    // 时间转换
    getDuration (second) {
      var days = Math.floor(second / 86400)
      var hours = Math.floor((second % 86400) / 3600)
      var minutes = Math.floor(((second % 86400) % 3600) / 60)
      var seconds = Math.floor(((second % 86400) % 3600) % 60)
      var duration = days + '天' + hours + '小时' + minutes + '分' + seconds + '秒'
      return duration
    },

    // 获取加工程序列表
    async getProcessList () {
      this.tableDataProgramList = []
      let res = await processList(this.form.processInfoId)
      this.tableDataProgramList = this.$utils.setLabel(res.data, this.columnsProgramList)
    },

    // 获取工艺信息
    async getProcessInfo () {
      getWorkingSteps(this.form.workingStepId).then(res => {
        if (res.data) {
          this.processInfo = Object.assign(res.data)
        }
      })
    },

    // 获取文件列表
    async getProcessFileList () {
      this.processFileList = []
      let res = await processFileList(this.form.processInfoId)
      this.processFileList = res.data
    },

    // 判断文件后缀
    judgeFileExtension (name) {
      let index = name.lastIndexOf('.')
      let ext = name.substr(index + 1)
      if (ext.toLowerCase() === 'pdf') {
        return {
          icon: 'icontubiao-137',
          color: 'red',
          type: 'pdf'
        }
      } else {
        return {
          icon: 'icontubiao-136',
          color: '#a8efed',
          type: 'img'
        }
      }
    },

    // 编辑填充表格
    assignment (val, row) {
      this.form = {}
      this.tab = 'basicInfo'
      this.form = Object.assign(this.form, val[0])
      this.rowInfo = row
      this.getOrderLogs()
    },

    getOrderLogs () {
      orderLogs(this.form.id, this.pagination.page, this.pagination.rowsPerPage).then(res => {
        res.data.forEach(o => {
          o.time = moment(o.time).format('YYYY-MM-DD HH:mm:ss')
          o.operation = this.$valueToEnum(this.Enums.WORK_ORDER_OPERATIONS, o.operation).desc
        })
        this.tableData = res.data
        this.pagination.rowsNumber = res.data.total
      })
    },

    // 打开报工明细
    openCompleteDetails () {
      this.completeDetails.show = true
      this.isShowInnerLoading = true
      getCheckinLogs(this.form.id).then(res => {
        res.data.forEach(o => {
          o.time = moment(o.time).format('YYYY-MM-DD HH:mm:ss')
        })
        this.tableDataCheckinLog = res.data
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },

    // 打开不良明细
    openBadDetails () {
      this.badDetails.show = true
      this.isShowInnerLoading = true
      orderQualityLogs(this.form.id, '1').then(res => {
        this.tableDataBadDetails = res.data.map(o => {
          o.createTime = moment(o.createTime).format('YYYY-MM-DD HH:mm:ss')
          return {
            ...o
          }
        })
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },

    // 打开让步明细
    openConcession () {
      this.concession.show = true
      this.isShowInnerLoading = true
      orderQualityLogs(this.form.id, '2').then(res => {
        this.tableDataConcession = res.data.map(o => {
          o.createTime = moment(o.createTime).format('YYYY-MM-DD HH:mm:ss')
          return {
            ...o
          }
        })
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },

    // 初始化状态
    init () {
      this.statusOptions = [{
        label: '全部',
        value: null
      }]

      const newArr = Object.entries(this.Enums.BUSINESS_STATUS)
        .filter(entry => entry[1].workOrder)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc,
            color: entry[1].color
          }
        })
      this.statusOptions.push(...newArr)
    },

    // 过滤状态枚举
    judgeStatus (statusCode, type, bool) {
      let statusCodeNew = statusCode
      if (bool) {
        statusCodeNew = 13
      }
      if (type === 'name') {
        let name = ''
        this.statusOptions.forEach(o => {
          if (o.value === statusCodeNew) {
            name = o.label
          }
        })
        return name
      } else {
        let color = ''
        this.statusOptions.forEach(o => {
          if (o.value === statusCodeNew) {
            color = o.color
          }
        })
        return color
      }
    },

    // 过滤优先级描述
    judgePriorityName (value) {
      let newObj = Object.entries(this.Enums.PRIORITY).map(entry => {
        return entry[1].value
      })
      if (value !== undefined && newObj.includes(value)) {
        return this.$valueToEnum(this.Enums.PRIORITY, value).desc
      } else {
        return '--'
      }
    },

    // 过滤优先级颜色
    judgePriorityColor (value) {
      let newObj = Object.entries(this.Enums.PRIORITY).map(entry => {
        return entry[1].value
      })
      if (value !== undefined && newObj.includes(value)) {
        return this.$valueToEnum(this.Enums.PRIORITY, value).color
      } else {
        return '#333333'
      }
    },

    // 切换每页显示条数（处理进程）
    onPageSizeChange: function (val) {
      this.pagination.rowsPerPage = val
      this.getList()
    },

    // 切换页码（处理进程）
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    },

    // 切换每页显示条数（报工明细）
    onPageSizeChangeCheckinLog: function (val) {
      this.pagination.rowsPerPage = val
      this.getList()
    },

    // 切换页码（报工明细）
    onPageChangeCheckinLog: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.textarea-box .q-field__control{
    border-radius 6px
    border-top-left-radius 0
    border-top-right-radius 0
  }
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }

  .col-4,.col-3{
    padding 0 10px
    margin-bottom 10px
  }
  .status {
    width: 10px
    height: 10px
    border-radius: 50%
    display: inline-block
    margin-right 5px
  }
  .negative {
    color $negative
  }
  .primary {
    color $primary
  }
  .secondary {
    color $secondary
  }
  .accent {
    color $accent
  }
  .positive {
    color $positive
  }
  .info {
    color $info
  }
  .warning {
    color $warning
  }
  .sudoku_row{
    display: flex;
    align-items: center;
    width:100%;
    flex-wrap: wrap;
  }
  .sudoku_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:25%;
    padding: 3px
  }
  .file_item{
    display flex
    justify-content center
    align-items center
    width 100%
    height 40px
    border-radius 6px
    cursor pointer
    border 1px solid #d3d3d3
/*    background: #f7b82d
    color: #fff*/
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.15)
  }
/*  .opacity{
    opacity: 0.4;
    background: #e5e5e5;
  }*/
/*  .sudoku_item img{
    margin-bottom: 3px;
    display: block;
  }*/
</style>

<style lang="stylus">
  .work-order-details {
    .myTable .q-table__middle{
      max-height calc(100% - 100px)
    }
  }
</style>
